<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="th/m/include/head_css :: head(~{::title}, ~{::link}, ~{::style})">
    <meta charset="utf-8">
    <title>查看流程</title>
    <style>
        body {
            font-size: 15px;
            background-color: #f6f8fe !important;
        }
        .segment-wrap {
            padding: 5px 8px;background-color: #fff;
        }
        .mui-segmented-control {
            margin-bottom: 5px;
        }
        .content-box {
            background-color: #fff;
            margin: 15px;
            padding-bottom: 5px;
            border-radius: 8px;
        }
        .mui-table-view-cell:after {
            right: 15px;
        }
        .mui-table-view:before {
            background-color: #fff !important;
        }

        .mui-h5 {
            color: #000;
        }
        /*@用户*/
        .mention {
            color: #3494f1;
        }
        /*使意见输入框的标签置顶*/
        .mui-table-cell {
            vertical-align: top;
        }
    </style>
    <link rel="stylesheet" th:href="@{/weixin/css/css.css}"/>
    <link rel="stylesheet" th:href="@{/weixin/css/at_flow.css}"/>
    <link rel="stylesheet" th:href="@{/weixin/css/photoswipe.css}"/>
    <link rel="stylesheet" th:href="@{/weixin/css/photoswipe-default-skin/default-skin.css}"/>
    <link rel="stylesheet" th:href="@{/lte/css/style.css?v=4.1.0}"/>
</head>
<body>
<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">查看流程</h1>
</header>
<div class="mui-content">
    <div th:if="${!isLight}" class="segment-wrap">
        <div id="segmentedControl" class="mui-segmented-control">
            <a class="mui-control-item mui-active" href="#item1">
                详情
            </a>
            <a class="mui-control-item" href="#item2">
                过程
            </a>
        </div>
    </div>
    <div class="content-box">
        <div id="item1" class="mui-control-content mui-active">
            <ul class="mui-table-view">
            </ul>
            <div class="annex-group">
                <div class="reply-form" th:if="${isFlowStarted && isReply}" style="margin-bottom:10px">
                    <div class="mui-input-row mui-input-range" style="display: none">
                        <label>进度<span id="progressLabel" style="margin-left:10px"></span></label>
                        <input id="progress" name="progress" type="range" min="0" max="100"
                               onchange="$('#progressLabel').text(mui('#progress')[0].value)">
                    </div>
                    <div class="mui-input-row" data-code="replyContent" data-isnull="false">
                        <label style="width: 100%">
                            <span>回复</span><span style='color:red;'>*</span>
                            <span class="mention" style="margin-left: 20px" onclick="atUser()">@用户</span>
                        </label>
                        <div style="text-align:center">
                            <textarea id="replyContent" name="replyContent" placeholder="请输入回复内容" style="width:96%; height:150px;"></textarea>
                        </div>
                    </div>
                    <div class="mui-input-row mui-checkbox" data-code="isSecret">
                        <label><span>隐藏</span><span style='color:red;'>*</span></label>
                        <input type="checkbox" id="isSecret" name="isSecret" value="1"/>
                    </div>
                    <div class="mui-button-row">
                        <button type="button" class="mui-btn mui-btn-primary mui-btn-outlined btn-ok">确定</button>
                    </div>
                </div>
            </div>
            <div style="height:160px"></div>
        </div>

        <div th:if="${!isLight}" id="item2" style="padding-top: 15px" class="mui-control-content">
            <div style="margin-left: 20px; margin-bottom: 5px">标题：[[${title}]]</div>
            <div style="margin-left: 20px">流程号：[[${flowId}]]</div>
            <div id="vertical-timeline" class="vertical-container light-timeline">
                <div th:each="json, state : ${myActions}" class="vertical-timeline-block" style="margin-bottom:10px">
                    <div class="vertical-timeline-icon blue-bg">
                        <i class="fa fa-user"></i>
                    </div>
                    <div class="vertical-timeline-content">
                        <h3>[[${json.title}]]</h3>
                        <p>[[${json.checkStatusName}]][[${json.resultValueDesc}]]</p>
                        <p class="remark" th:if="${flowIsRemarkShow}">
                            留言: [[${json.result}]]
                        </p>
                        <a th:if="${isRecall and json.canRecall}" href="#" class="btn btn-sm btn-success btn-recall" th:attr="myActionId=${json.id}">撤回</a>
                        <div class="vertical-date">
                            [[${json.userRealName}]]<br>
                            <th:block th:if="${not #strings.isEmpty(json.receiveDate)}">
                            <span class="receive-date">收到时间:&nbsp;[[${json.receiveDate}]]</span><br>
                            </th:block>
                            <th:block th:if="${not #strings.isEmpty(json.checkDate)}">
                            <span class="check-date">处理时间:&nbsp;[[${json.checkDate}]]</span><br>
                            </th:block>
                            <div th:if="${json.isRemindBtnShow}" style="margin-top: 10px" th:attr="onclick=|remind('${json.id}')|">>> 催办</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" th:src="@{/weixin/js/macro/macro.js}"></script>
<script type="text/javascript" src="../../weixin/js/uniapps.js"></script>
<script type="text/javascript" th:src="@{/weixin/js/jweixin-1.6.0.js}"></script>
<script type="text/javascript" src="../../weixin/js/photoswipe.js"></script>
<script type="text/javascript" src="../../weixin/js/photoswipe-ui-default.js"></script>
<script type="text/javascript" src="../../weixin/js/photoswipe-init-manual.js"></script>
<script type="text/javascript" src="../../weixin/js/base/mui.form.js"></script>
<script type="text/javascript" src="../../weixin/js/mui.flow.wx.js"></script>
<script th:inline="javascript">
    var isUniWebview = [[${nav.isUniWebview}]];

    if(!mui.os.plus || isUniWebview) {
        // 必须删除，而不能是隐藏，否则mui-bar-nav ~ mui-content中的padding-top会使得位置下移
        $('.mui-bar').remove();
    }

    if(mui.os.plus) {
        // 注册beforeback方法，以使得在流程处理完后退至待办列表页面时能刷新页面
        if (isUniWebview) {
            mui.init({
                keyEventBind: {
                    backbutton: false // 关闭back按键监听
                }
            });
        }

        // 禁止下拉刷新
        mui.plusReady(function() {
            plus.webview.currentWebview().setPullToRefresh({support: false});
        });
    }

    var skey = [[${nav.skey}]];
    var flowId = [[${flowId}]];
    var content = document.querySelector('.mui-content');
    var options = {"skey": skey, "flowId": flowId};
    var flow = new mui.Flow(content, options);
    flow.flowAttendDetail();

    $(function () {
        $('.btn-recall').click(function () {
            var myActionId = $(this).attr('myActionId');
            var btnArray = ['否', '是'];
            mui.confirm('您确定要撤回么？', '提示', btnArray, function (e) {
                if (e.index == 1) {
                    $.ajax({
                        type: "post",
                        url: "../../flow/recall",
                        data: {
                            "action": "recall",
                            "skey": skey,
                            "flowId": flowId,
                            "myActionId": myActionId
                        },
                        success: function (res, status) {
                            res = $.parseJSON(res);
                            var data = res.data;
                            console.log('data', data);
                            if (data.res == 0) {
                                mui.alert(res.msg, '提示', ['确定'], function (e) {
                                    window.location.reload();
                                });
                            } else {
                                mui.alert(data.msg, '提示', ['确定']);
                            }
                        },
                        error: function (XMLHttpRequest, textStatus) {
                            //alert(XMLHttpRequest.responseText);
                        }
                    })
                }
            });
        });

        $('.btn-ok').click(function () {
            var _tips = "";
            jQuery("div[data-isnull='false']").each(function (i) {
                var _code = jQuery(this).data("code");
                var _val = jQuery("#" + _code).val();
                if (_val == undefined || _val == "") {
                    var _text = jQuery(this).find("span:first").text();
                    _tips += _text + " 不能为空\r\n"
                }
            });
            if (_tips != null && _tips != "") {
                mui.toast(_tips);
                return;
            }

            var progress = mui('#progress')[0].value;
            var isSecret = jQuery('#isSecret').is(":checked") ? 1 : 0;
            $.ajax({
                type: "post",
                url: "../../public/android/flow/addReply",
                data: "skey=" + [[${nav.skey}]] + "&content=" + jQuery('#replyContent').val() + "&isSecret=" + isSecret + "&progress=" + progress + "&flowId=" + [[${flowId}]],
                dataType: "html",
                contentType: "application/x-www-form-urlencoded; charset=iso8859-1",
                beforeSend: function (XMLHttpRequest) {
                },
                success: function (data, status) {
                    data = $.parseJSON(data);
                    if (data.ret == "1") {
                        var $ul = $('.reply-ul');
                        $ul.show();
                        var li = '<li class="mui-table-view-cell">';
                        li += '<div class="reply-header">';
                        li += '<span class="reply-name">' + [[${realName}]] + '</span>';
                        // li += '<span class="reply-progress">' + progress + '</span>';
                        li += '<span class="reply-date">' + formatDateTime(new Date()) + '</span>';
                        li += '</div>';
                        li += '<div class="reply-content">' + highlightMentions(data.content) + '</div>';
                        li += '</li>';
                        $ul.append(li);

                        $('#progressLabel').text(progress);
                        $('#replyContent').val('');
                        // 不删除，使可以继续回复
                        // $('.reply-form').remove();
                    }
                    mui.toast(data.msg);
                },
                error: function (XMLHttpRequest, textStatus) {
                    alert(XMLHttpRequest.responseText);
                }
            });
        });
    });

    $(function () {
        watermark([[${realName}]]);
    });

    function remind(myActionId) {
        var btnArray = ['否', '是'];
        mui.confirm('您确定要催办么？', '提示', btnArray, function (e) {
            if (e.index == 1) {
                $.ajax({
                    type: "post",
                    url: "../../flow/remind",
                    data: {
                        "skey": skey,
                        "myActionId": myActionId
                    },
                    success: function (res, status) {
                        res = $.parseJSON(res);
                        mui.toast(res.msg);
                    },
                    error: function (XMLHttpRequest, textStatus) {
                        //alert(XMLHttpRequest.responseText);
                    }
                })
            }
        });
    }

    function atUser() {
        selectUserWinForAtUserInReply(skey);
    }
</script>
<script th:inline="javascript">
    [(${formJs})]
</script>
<div th:replace="th/m/include/navbar :: nav(${nav}, false, '', false)"></div>
</body>
</html>